<template>
  <div>
    <el-input
      placeholder="请输入内容"
      prefix-icon="el-icon-search"
      v-model="keyword"
    >
    </el-input>
    <ul class="news">
      <li @click="goPage('/news', '../static/news1.jpg')">
        <h1>癫痛大发作，急救时要掌握哪些关键点?</h1>
        <div class="imgs">
          <img
            :src="'../static/poster1.png'"
          />
          <img
            src="https://gimg3.baidu.com/search/src=http%3A%2F%2Fpics3.baidu.com%2Ffeed%2F962bd40735fae6cd6e5e665fd062f82f43a70f07.jpeg%40f_auto%3Ftoken%3Df72937a4dc6b9f7800f77299bb5395f2&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f360,240&n=0&g=0n&q=75&fmt=auto?sec=1680800400&t=1f696b50bd555de3f5c3f598cfc6075e"
          />
          <img
            :src="'../static/poster2.png'"

          />
        </div>
      </li>
    
      <li @click="goPage('/news', '../static/news2.jpg')">
        <h1>如何有效预防癫痛发作?</h1>
        <div class="imgs">
          <img
            src="https://gimg3.baidu.com/search/src=http%3A%2F%2Fpics0.baidu.com%2Ffeed%2F2cf5e0fe9925bc3103b651cc810e7abac91370dc.jpeg%40f_auto%3Ftoken%3D12e3666e93e8eb43d171ce1dbc6667a8&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f360,240&n=0&g=0n&q=75&fmt=auto?sec=1680800400&t=7276d9d77a52d11da95bccfb6c79ac3d"
          />
          <img
            src="https://gimg3.baidu.com/search/src=http%3A%2F%2Fpics3.baidu.com%2Ffeed%2F962bd40735fae6cd6e5e665fd062f82f43a70f07.jpeg%40f_auto%3Ftoken%3Df72937a4dc6b9f7800f77299bb5395f2&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f360,240&n=0&g=0n&q=75&fmt=auto?sec=1680800400&t=1f696b50bd555de3f5c3f598cfc6075e"
          />
          <img
            src="https://gimg3.baidu.com/search/src=http%3A%2F%2Fpics0.baidu.com%2Ffeed%2F023b5bb5c9ea15ce9923061069d1cdf83b87b23c.jpeg%40f_auto%3Ftoken%3D0b376e67e0613737ca88353380ee2ec6&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f360,240&n=0&g=0n&q=75&fmt=auto?sec=1680800400&t=efbabc9050e40f7a5f7fa68f1aaff3c5"
          />
        </div>
      </li>
      <li>
        <h1>仅仅过去3天，露脸的BLG女粉宣布退网：没有联系选手更没借此赚钱</h1>
        <div class="imgs">
          <img
            src="https://gimg3.baidu.com/search/src=http%3A%2F%2Fpics0.baidu.com%2Ffeed%2F2cf5e0fe9925bc3103b651cc810e7abac91370dc.jpeg%40f_auto%3Ftoken%3D12e3666e93e8eb43d171ce1dbc6667a8&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f360,240&n=0&g=0n&q=75&fmt=auto?sec=1680800400&t=7276d9d77a52d11da95bccfb6c79ac3d"
          />
          <img
            src="https://gimg3.baidu.com/search/src=http%3A%2F%2Fpics3.baidu.com%2Ffeed%2F962bd40735fae6cd6e5e665fd062f82f43a70f07.jpeg%40f_auto%3Ftoken%3Df72937a4dc6b9f7800f77299bb5395f2&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f360,240&n=0&g=0n&q=75&fmt=auto?sec=1680800400&t=1f696b50bd555de3f5c3f598cfc6075e"
          />
          <img
            src="https://gimg3.baidu.com/search/src=http%3A%2F%2Fpics0.baidu.com%2Ffeed%2F023b5bb5c9ea15ce9923061069d1cdf83b87b23c.jpeg%40f_auto%3Ftoken%3D0b376e67e0613737ca88353380ee2ec6&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f360,240&n=0&g=0n&q=75&fmt=auto?sec=1680800400&t=efbabc9050e40f7a5f7fa68f1aaff3c5"
          />
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: ''
    }
  },
  methods: {
    goPage(path, src) {
      console.log(path, src)
      this.$router.push({
        path,
        query: { src }
      })
    }
  }
}
</script>

<style scoped>
.el-input {
  width: 80%;
  margin-left: 10%;
  margin-top: 30px;
}
.imgs {
  display: flex;
  justify-content: space-around;
}
h1 {
  font-size: 18px;
}
li {
  /* border: 1px solid black; */
  /* background-color: red; */
  margin-top: 10px;
  /* border-radius: 20px; */
  overflow: hidden;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.news {
  width: 80%;
  height: 460px;
  overflow: auto;
  margin: 10%;
}
.imgs img {
  width: 80px;
  height: 50px;
}
</style>